<template>
	<div class="assetCarAdmin" v-loading="assetCarAdminLoading">
		<div class="title">车辆管理</div>
    <div class="searchBox">
      <el-form ref="form" :model="searchForm" size="mini" inline>
        <el-form-item label="车辆编号">
          <el-select v-model="searchForm.vehicle" placeholder="请选择车辆编号" clearable>
            <el-option v-for="item of vehicleNumList" :key="item.id" :label="item.name" :value="item.name" ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item style="margin-left: 15px;">
          <el-button type="primary" class="greenBtn" size="mini" @click="onSubmit({pageSize: pageSize, pageNum: 1})">确定</el-button>
          <el-button type="primary" class="greenBtn" size="mini" @click="added">新增</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="tableBox">
      <el-table :data="carAdminList.data" border size="mini"
        style="width: 100%" :header-cell-style="{color: '#666'}"
      > 
        <el-table-column
          prop="name"
          label="车辆编号"
          align="center">
        </el-table-column>
        <el-table-column
          prop="number"
          label="车牌号"
          align="center">
        </el-table-column>
        <el-table-column
          prop="carPerson"
          label="车辆驾驶人姓名"
          align="center">
        </el-table-column>
        <el-table-column
          prop="carPhone"
          label="联系方式"
          align="center">
        </el-table-column>
        <el-table-column
          prop="carFactor"
          label="监测因子"
          align="center">
        </el-table-column>
        <el-table-column
          prop="carSystem"
          label="设备编号"
          align="center">
        </el-table-column>
      </el-table>
    </div>
    <myPaging :func="pageUpdate" :total="carAdminList.total"></myPaging>

    <el-dialog width="70%" :visible.sync="addedFormVisible" append-to-body>
      <div slot="title">
        <p>新增</p>
      </div>
      <el-form :model="addedForm" :rules="addedFormRules" size="mini" ref="addedForm" label-width="100px" style="width: 80%;margin: 0 auto;" v-loading="addedFormLoading">
        <el-row>
          <el-col :span="12">
            <el-form-item label="车辆编号" prop="name" >
              <el-input v-model="addedForm.name" placeholder="请填写车辆编号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="车牌号" prop="number" >
              <el-input v-model="addedForm.number" placeholder="请填写车牌号"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="驾驶人姓名" prop="carPerson" >
              <el-input v-model="addedForm.carPerson" placeholder="请填写驾驶人姓名"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系方式" prop="carPhone" >
              <el-input v-model="addedForm.carPhone" placeholder="请填写联系方式"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="监测因子" prop="carFactor" >
              <el-select
                style="width: 100%"
                multiple
                v-model="addedForm.carFactor"
                clearable
                placeholder="请选择监测因子">
                <el-option
                  v-for="item in factorsOption"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="设备编号" prop="carSystem" >
              <el-input v-model="addedForm.carSystem" placeholder="请填写设备编号"></el-input>
            </el-form-item>
          </el-col>
        </el-row>        

        <el-form-item>
          <el-button type="primary" class="greenBtn" size="mini" @click="addedSubmit">提交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
	</div>
</template>
<script>
import { mapActions, mapGetters} from "vuex"
import myPaging from '@/components/myPaging.vue'
export default {
  name: 'assetCarAdmin',
  data () {
    return {
      msg: 'hello assetCarAdmin!',
      assetCarAdminLoading: false,
      receUserLoading: false,
      searchForm: {
        vehicle: '',
      },
      addedFormVisible: false,
      addedFormLoading: false,
      addedForm: {
        name: "",
        number: "",
        carPerson: "",
        carPhone: "",
        carFactor: [],
        carSystem: '',
      },
      addedFormRules: {
        carFactor: [
          { type: 'array', required: true, message: '请选择监测因子', trigger: 'change' }
        ],
        name: [
          { required: true, message: '请输入车辆编号', trigger: 'blur' },
        ],
        number: [
          { required: true, message: '请输入车牌号', trigger: 'blur' },
        ],
        carPerson: [
          { required: true, message: '请输入驾驶人', trigger: 'blur' },
        ],
        carPhone: [
          { required: true, message: '请输入驾驶人手机号', trigger: 'blur' },
        ],
        carSystem: [
          { required: true, message: '请输入设备编号', trigger: 'blur' },
        ],

      },
		}
  },
	methods: {
    ...mapActions([
      'fetchCarAdminList',
      'postCarAdminAdd',
      'getVehicleNumList'
    ]),
    async onSubmit(pageOption = {pageSize: this.pageSize, pageNum: 1}) {
      this.assetCarAdminLoading = true
      await this.fetchCarAdminList({...this.searchForm, ...pageOption})
      this.assetCarAdminLoading = false
    },
    pageUpdate(option) {
      this.onSubmit(option)
    },
    async addedSubmit() {
      this.$refs['addedForm'].validate(async (valid) => {
        if(valid) {
          this.addedFormLoading = true
          let result = await this.postCarAdminAdd(Object.assign({}, this.addedForm, {carFactor: this.addedForm.carFactor.join()}))
          if(result.message !== 'success') {
            this.$notify({
              type: 'warning',
              title: '提示',
              message: result.info,
            })
          }else {
            this.$notify({
              type: 'success',
              title: '成功',
              message: result.info,
            })
            await this.getVehicleNumList()
            this.$refs['addedForm'].resetFields();
            this.addedFormVisible = false
            this.onSubmit()
          }
          this.addedFormLoading = false
        }else {
          return false;
        }
      })
    },
    added() {
      this.addedFormVisible = true
    },
    uploadChange(file, fileList){
			this.addedForm.photoFiles = fileList
    },
    uploadExceed(files, fileList) {
			this.$notify.warning({
				title: '警告',
				message: '最多上传4张图片',
			})
    },
    handleSubmit(response) {
			this.addFormData.append('files', response.file)
    },
    loopAppend(formData, key, value) {
      formData.append(key, value)
    },
  },
  created() {
    this.onSubmit()
  },
  computed: {
    ...mapGetters({
      vehicleNumList: 'getVehicleNumList',
      carAdminList: 'getCarAdminList',

      factorsOption: 'getFactorsOption',
      eventAdmin: 'getEventAdmin',
      userAdminList: 'getUserAdminList',

      //分页依赖
      pageSize: 'getPageSize',
    })
  },
  components: {
    myPaging
  }
}
</script>
<style scoped>
.assetCarAdmin {
  background: #fff;
  min-height: 100%;
  padding: 0 20px 0 20px;
}
.assetCarAdmin .title {
  position: relative;
  left: 15px;
  line-height: 70px;
  font-size: 16px;
}
.assetCarAdmin .title::before {
  content: '';
  position: absolute;
  left: -15px;
  width: 4px;
  height: 20px;
  top: 25px;
  background-color: #2399ff;
}
.searchBox {
  background: #fff;
  margin-bottom: 15px;
}
.searchBox .line {
  text-align: center;
}
.assetCarAdmin .imgItem {
  max-width: 200px;
  margin-right: 15px;
}
</style>


